<template>
	<view class="detail">
		<!-- 背景图 -->
		<view class="bgimg" :style="{'background-image':'url('+msg.detail.al.picUrl+')'}"></view>
		<!-- 头部 -->
		<musicHead :title="msg.detail.name" :icon="true" color="#fff"></musicHead>
		<view class="container">
			<scroll-view scroll-y="true" >
				<view>
					<view class="content">
							<!-- 跑马灯效果 -->
							    <Marquee loop="infinite" class="marquee" scrollamount="5">
									<!-- 判断有几个歌手唱的 -->
							        <div class="leftmarquee" v-if="msg.ar0.length===2">
							            <div>
							                {{msg.ar1.name}},{{msg.ar2.name}} ——
							            </div> 
							            <span>{{msg.detail.name}}</span> 
							        </div>
									<div class="leftmarquee" v-if="msg.ar0.length===1">
									    <div>
									        {{msg.ar1.name}} ——
									    </div> 
									    <span>{{msg.detail.name}}</span> 
									</div>
							    </Marquee>
								<!-- 胶片部分 -->
					</view>
					 <view class="center" @tap="handleToPlay">
							<svg class="icon" aria-hidden="true">
								<use :xlink:href="msg.iconPlay"></use>
							</svg>
					        <image src="../../static/cz.png" mode="" class="cz" :class="{'czbf' : msg.isCzRotate}"></image>
							<image src="../../static/cp.png" mode="" class="cp"></image>
							<image :src=msg.detail.al.picUrl mode="" class="arpic" :class="{'playRun' : msg.isPlayRotate}"></image>
					 </view>
					 <!-- 歌词部分 -->
					 <view class="lyric">
							<view class="lyric-wrap">
								<view :class="{active : msg.lyricIndex == index}" class="lyric-item" v-for="(item , index) in msg.songLyric" :key="index">{{item.lyric}}</view>
							</view>
					 </view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import musicHead from '../../components/musicHead/musicHead.vue'
	import { gequDetail } from '../../api/index.js'
	import {lyric} from '../../api/index.js'
	import {audio} from '../../api/index.js'
	import { reactive ,onMounted} from 'vue'
	const msg = reactive({
		/* 默认歌词选中第一个 */
		lyricIndex:0,
		songLyric:[],
		detail:{
			al:{
				picUrl:"",
			},
			name:"",
		},
		lyric:"",
		ar0:[],
		ar1:[],
		ar2:[],
		audios:[],
		iconPlay:'#icon-zanting-copy',
		isPlayRotate:true,
		isCzRotate:true,
	})
	// 将歌词的时间转化成秒
	const formatTimeToSecond=(value)=>{
		let arr = value.split(':');
		return (Number(arr[0]*60) + Number(arr[1])).toFixed(1);
	}
	// 接收  list  里面传来的id
	onLoad( async (option)=>{
		uni.showLoading({
			title: '正在加载中......'
		})
		// console.log(option.songsid) 
		// 播放器详情数据
		await gequDetail (option.songsid).then((res)=>{
			// console.log(res.data.songs[0])
			msg.detail = res.data.songs[0]
			msg.ar0= msg.detail.ar
			msg.ar1= msg.detail.ar[0]
			msg.ar2= msg.detail.ar[1]
			// console.log(msg.ar0.length)
			// console.log(msg.ar2)
			uni.hideLoading()
		})
		// 歌词的数据
		await lyric(option.songsid).then((res)=>{
			// console.log(res.data.lrc.lyric)
			msg.lyric = res.data.lrc.lyric
			// 拆解，解析歌词把它变成数组
			let result = /\[([^\]]+)\]([^\[]+)/g;
			// 正则的match、方法
			let datas = msg.lyric.match(result);
			// console.log(datas)
			let geci = [];
			msg.lyric.replace(result,($0,$1,$2)=>{
				geci.push({
					"time" : formatTimeToSecond($1),
					"lyric" :$2,
					});
				})
				// console.log(geci)
				// 把后台的数据，赋给reactive里面的空数组
				msg.songLyric = geci
			
		})
		// 歌曲播放地址  audio
		await audio(option.songsid).then((res)=>{
			
			msg.audios = res.data.data[0]
			console.log(msg.audios.url)
		// 播放音频
		const innerAudioContext = uni.createInnerAudioContext();
		innerAudioContext.autoplay = true;
		innerAudioContext.src = msg.audios.url;
		innerAudioContext.onPlay(() => {
		  console.log('开始播放');
		  msg.iconPlay = '#icon-zanting-copy';
		  msg.isPlayRotate = true;
		});
		innerAudioContext.onPause(() => {
		  console.log('暂停');
		  msg.iconPlay = '#icon-bofang';
		  msg.isPlayRotate = false;
		});
		innerAudioContext.onError((res) => {
		  console.log(res.errMsg);
		  console.log(res.errCode);
		});
		})
		
	})
	// 监听是否处有播放状态，点击切换
	const handleToPlay=()=>{
		if(innerAudioContext.pause){
			this.innerAudioContext.play();
		}else{
			this.innerAudioContext.pause();
		}
	}
</script>
<style scoped>
	.content{
		width: 200rpx;
		height: 60rpx;
		margin: 0 auto;
	}
	.marquee{
	    width: 200rpx;
	    color: black;
		line-height: 60rpx;
		height: 60rpx;
		margin:  0 auto;
	}
	.leftmarquee{
	    width: 14.7rem;
	    display: flex;
	    height: 100%;
	    margin-left: 15rpx;
	}
	  .center{
	          width: 100%;
	          height: 20rem;
	          display: flex;
	          flex-direction: column;
	          align-items: center;
	          position: relative;
			
	    }
		/* 暂停 */
		.cz{
		        width: 6rem;
		        height: 10rem;
		        position: absolute;
		        left: 50%;
		        transform-origin: 0 0;
				transform: rotate(-15deg);
				animation: 1s linear mycz;
				animation-play-state: paused;
		}
		/* 播放 */
		.czbf{
			animation-play-state: running;
		}
		@keyframes mycz{
			from{transform: rotate(0deg);}
			to{transform: rotate(-15deg);}
		}
		.cp{
				width: 13rem;
		        height: 13rem;
		        position: absolute;
		        bottom: 2.3rem;
		        z-index: -99;
		}
		/* 暂停状态 */
		 .arpic{
				width: 8.4rem;
		        height: 8.4rem;
		        border-radius: 50%;
		        position: absolute;
		        bottom: 4.5rem;
				z-index: -9;
				animation: 10s linear move infinite;
				animation-play-state: paused;
		}
		/* 播放状态 */
		.playRun{
			animation-play-state: running;
		}
		@keyframes move {
			from{transform: rotate(0deg);}
			to{transform: rotate(360deg);}
		}
		.icon{
			position: absolute;
			top: 10.5rem;
			left: 11.3rem;
		}
		.lyric{
			font-size: 32rpx;
			line-height: 84rpx;
			height: 252rpx;
			text-align: center;
			overflow: hidden;
			color: #6f6e73;
		}
		.lyric-item{
			line-height: 84rpx;
		}
		.lyric-item.active{
			color: white;
		}
</style>
